<template>
  <!-- 用户管理 -->
  <div class="container-users">
    <!-- 筛选搜索 -->
    <div class="screen_users">
      <el-form :inline="true" :model="formScrUser">
        <el-form-item>
          <el-select v-model="formScrUser.grade" placeholder="全部年级">
            <el-option
              v-for="item in grades"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formScrUser.category" placeholder="课程类别">
            <el-option
              v-for="item in categorys"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formScrUser.phoName"
            placeholder="请输入老师名称或手机号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 教师/学生列表信息 -->
    <el-tabs v-model="teStu" @tab-click="handleClick">
      <!-- 教师列表 -->
      <el-tab-pane label="教师" name="teacher">
        <div class="listHeader">
          <div class="count">
            当前结果:
            <span>总计 164 条记录</span>
          </div>
          <el-select
            v-model="formScrUser.tCustomVal"
            class="zidingyi"
            placeholder="自定义显示列"
          >
            <el-option
              v-for="item in tCustom"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <el-table :data="teacherData" style="width: 100%">
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="school" label="学校" width="180">
          </el-table-column>
          <el-table-column prop="province" label="省份"> </el-table-column>
          <el-table-column prop="city" label="市"> </el-table-column>
          <el-table-column prop="district" label="区/县"> </el-table-column>
          <el-table-column prop="gender" label="性别"> </el-table-column>
          <el-table-column prop="age" label="年龄"> </el-table-column>
          <el-table-column prop="leadAClass" label="带班"> </el-table-column>
          <el-table-column prop="caozuo" label="操作"> </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </el-tab-pane>
      <!-- 学生列表 -->
      <el-tab-pane label="学生" name="student">
        <div class="listHeader">
          <div class="count">
            当前结果:
            <span>总计 164 条记录</span>
          </div>
          <el-select
            v-model="formScrUser.sCustomVal"
            class="zidingyi"
            placeholder="自定义显示列"
          >
            <el-option
              v-for="item in sCustom"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <el-table :data="studentData" style="width: 100%">
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="stuClass" label="带班"> </el-table-column>
          <el-table-column prop="school" label="学校" width="180">
          </el-table-column>
          <el-table-column prop="province" label="省份"> </el-table-column>
          <el-table-column prop="city" label="市"> </el-table-column>
          <el-table-column prop="district" label="区/县"> </el-table-column>
          <el-table-column prop="gender" label="性别"> </el-table-column>
          <el-table-column prop="age" label="年龄"> </el-table-column>
          <el-table-column prop="stuId" label="学号"> </el-table-column>
          <el-table-column prop="caozuo" label="操作"> </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <!-- 用户新增 -->
    <div class="add_icon" @click="$router.push('/user-add')">
      <img src="../../../static/img/icon_hdglfbhd.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'con-users',
  data() {
    return {
      teStu: 'teacher',
      // 提交搜索
      formScrUser: {
        grade: '',
        category: '',
        phoName: '',
        tCustomVal: '',
        sCustomVal: ''
      },
      // 年级列表
      grades: [],
      // 课程类别
      categorys: [],
      teacherData: [{
        name: '王小虎',
        school: '海口第一中学',
        province: '广东',
        city: '深圳市',
        district: '南山',
        gender: '男',
        age: '18',
        leadAClass: '一班',
        caozuo: '操作'
      }, {
        name: '王小虎',
        school: '海口第一中学',
        province: '广东',
        city: '深圳市',
        district: '南山',
        gender: '男',
        age: '18',
        leadAClass: '一班',
        caozuo: '操作'
      }, {
        name: '王小虎',
        school: '海口第一中学',
        province: '广东',
        city: '深圳市',
        district: '南山',
        gender: '男',
        age: '18',
        leadAClass: '一班',
        caozuo: '操作'
      }, {
        name: '王小虎',
        school: '海口第一中学',
        province: '广东',
        city: '深圳市',
        district: '南山',
        gender: '男',
        age: '18',
        leadAClass: '一班',
        caozuo: '操作'
      }],
      studentData: [{
        name: '张三',
        stuClass: '三班',
        school: '海口第一中学',
        province: '广东',
        city: '深圳市',
        district: '罗湖',
        stuId: 181818,
        gender: '男',
        age: '20',
        caozuo: '操作'
      }, {
        name: '张三',
        stuClass: '三班',
        school: '海口第一中学',
        province: '广东',
        city: '深圳市',
        district: '罗湖',
        stuId: 181818,
        gender: '男',
        age: '20',
        caozuo: '操作'
      }, {
        name: '张三',
        stuClass: '三班',
        school: '海口第一中学',
        province: '广东',
        city: '深圳市',
        district: '罗湖',
        stuId: 181818,
        gender: '男',
        age: '20',
        caozuo: '操作'
      }, {
        name: '张三',
        stuClass: '三班',
        school: '海口第一中学',
        province: '广东',
        city: '深圳市',
        district: '罗湖',
        stuId: 181818,
        gender: '男',
        age: '20',
        caozuo: '操作'
      }],
      // 自定义选项
      tCustom: [],
      sCustom: []
    }
  },
  created() {

  },
  methods: {
    // 选项卡触发的事件
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 搜索
    onSearch() {

    }
  }
}
</script>

<style lang="scss" scoped>
.el-button {
  padding: 0;
}
.zidingyi {
  /deep/ .el-input__inner,
  /deep/.el-input .el-input__count .el-input__count-inner {
    background-color: #f7fbfc;
    line-height: 0.2188rem;
    width: 0.9396rem !important;
    border-radius: 0.0521rem;
  }
}
/deep/.el-table th {
  font-size: 0.0938rem;
}
.container-users {
  padding: 0.0781rem 0.1406rem;
  position: relative;
  background-color: #fff;
  border-radius: 0.0781rem;
  .screen_users {
    position: absolute;
    right: 0.099rem;
    top: 0.1458rem;
    height: 0.2188rem;
    line-height: 0.2188rem;
    vertical-align: middle;
    z-index: 1;
    /deep/.el-select > .el-input--medium > .el-input__inner,
    /deep/.el-input .el-input__count .el-input__count-inner {
      background-color: #f7fbfc;
      line-height: 0.2188rem;
      width: 0.7396rem;
      border-radius: 0.0521rem;
    }
    /deep/.el-input--medium .el-input__inner,
    .el-input--suffix .el-input__inner,
    .el-select .el-input__inner {
      background-color: #f7fbfc;
      height: 0.2188rem;
      width: 1.5625rem;
      border-radius: 0.0521rem;
    }
    .el-button {
      width: 0.4479rem;
      height: 0.2188rem;
      background: #0fdd8d;
      border-radius: 0.0521rem;
      color: #fff;
    }
    // .el-button:hover {
    //   color: #fff;
    // }

    /deep/.el-input--medium .el-input__icon {
      line-height: 0.2344rem;
    }
  }
  .el-tabs {
    margin-top: 0.0521rem;
    .listHeader {
      margin: 0 0 0.0781rem 0.1042rem;
      display: flex;
      justify-content: space-between;
      .count {
        font-size: 0.0729rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #525252;
        line-height: 0.1875rem;
        span {
          color: #888888;
        }
      }
      /deep/.el-input--medium .el-input__inner,
      .el-input--suffix .el-input__inner,
      .el-select .el-input__inner {
        background-color: #f7fbfc;
        height: 0.1875rem;
        width: 0.7031rem;
        border-radius: 0.0521rem;
      }
    }
  }
  // 用户新增
  .add {
    position: fixed;
    right: 2%;
    bottom: 2%;
  }
}
.el-tabs {
  /deep/.el-tabs__item.is-active {
    color: #0fdd8d;
    background: #fff;
    border-bottom: 2px solid #0fdd8d;
  }
  /deep/.el-tabs__item:hover {
    color: #0fdd8d;
  }
  /deep/.el-tabs__item {
    font-size: 0.0938rem;
    height: 0.3125rem;
    line-height: 0.3125rem;
    margin: 0 0.2656rem;
  }
}
</style>
